<template>
	<!-- 活动商品 -->
	<view class="activity-wrap u-p-x-20 u-p-b-20  u-m-b-10 seckill-card">
		<view class="template-box" v-if="imagepath.leng>0">
			<image class="imagestyle" :src="imagepath" ></image>
		</view>
		<view class="template-box">
			<image  class="imagestyle" :src="imagepath"  @tap="jump('/pages/goods/detail', { id: bindId })"></image>
		</view>
		<!--b-->
		<view class="big-goods  u-flex u-p-20 u-col-top u-m-b-16" v-for="item in goodsList" :key="item.id"
			@tap="jump('/pages/goods/detail', { id: item.id })">
			<image class="goods-img" :src="item.img" ></image>
				<view class=" card-right u-m-l-20 u-flex-col u-row-between">
					<view class="">
						<view class="goods-title u-m-t-10 u-m-b-10">
							<span style="color: #de9803;">{{item.storeName}}</span>
							 <span style="margin-left: 10rpx;margin-right: 10rpx;">|</span>
							{{ item.name }}
						</view>
						<view class="subtitle-text u-m-b-10">{{ item.subtitle?item.subtitle:"" }}</view>
					</view>
					<view class="u-flex u-m-y-10 u-row-between">
					<!-- <view class="progress-text">补贴￥{{ ((item.price-item.cost)* item.rebate/100).toFixed(2)}}</view> -->
					</view>

					<view class=" u-flex u-row-between u-col-center shop-box">
						<view class="u-flex u-col-bottom">
							<view class="price u-m-r-10">￥{{ item.price }}</view>
							<view class="origin-price">
							</view>
						</view>
						<button class="u-reset-button buy-btn">立即抢购</button>
					</view>
				</view>
		</view>
		<view class="x-c" style="width: 100%;">
			<u-loadmore v-show="hasmore" height="80rpx" :status="loadStatus" icon-type="flower" color="#ccc" />
		</view>
		<view class="upward" v-if="isShow"	@click="pullTop()"> <u-icon name="arrow-upward"	color="#999" size="28"> </u-icon></view>
	</view>
</template>

<script>
	/**
	 * 自定义之秒杀样式组件
	 * @property {Object} detail - 秒杀商品信息
	 */
	export default {
		components: {},
		data() {
			return {
				isShow: false,
				timestamp: 0, //倒计时
				goodsList: [],
				oneRowNum: 5,
				showActivity: true, //是否显示活动。
				rebate: 0,
				reslist: [],
				detailtab: 0,
				currentPage: 0,
				hasmore: true,
				cateId: 0,
				loadStatus: 'nomore',
				imagepath:"",
				bindId:""
			};
		},
		props: {
			detail: {
				type: Object,
				default: () => {
					return {};
				}
			}
		},
		watch: {},
		computed: {},
		created() {
			// this.getcate()
			// uni.$on('uOnReachBottom', data => {
			// 	if (this.hasmore) {
			// 		this.currentPage += 1;
			// 		this.getGoodsList();
			// 	}
			// });
			this.getGoodsList()

		},
		onPageScroll(e) {
			if (e.scrollTop > 500) {
				this.isShow = true;
			} else {
				this.isShow = false;
			}
		},
		methods: {
			pullTop() {
				uni.pageScrollTo({
					scrollTop: 0, //滚动到距离顶部为0
					duration: 500 //滚动时长
				})
			},
			// 路由跳转
			jump(path, parmas) {
				this.$Router.push({
					path: path,
					query: parmas
				});
			},

			getcate() {
				let that = this;
				uni.showLoading({})
				that.$http(
					'common.youxuannew',
				).then(res => {
					
					uni.hideLoading()
					that.reslist = res.reslist
					that.cateId = that.reslist[0].id;
					this.getGoodsList();
				});
				uni.stopPullDownRefresh();
				this.isRefresh = true;
			},


			// 获取秒杀商品
			getGoodsList() {
				let that = this;
				that.$http('common.jingpindetail', {
					cateId: that.cateId,
					page: that.currentPage
				}).then(res => {
					if (res.code === 1) {
						
						that.imagepath =res.themeimg
						uni.setNavigationBarTitle({
							title: res.theme
						})
						that.bindId = res.bindId
					 
						if(res.productList.length<20){
								this.loadStatus = 'nomore';
						}
						if (res.productList.length > 0) {
							if (that.currentPage == 0) {
								that.goodsList = res.productList;
								that.rebate = res.rebate;
							} else {
								that.goodsList.concat(res.productList)
							}
						} else {
							that.hasmore = false
						}
					} else {
						that.showActivity = false;
						//console.log(`%cerr:秒杀活动已结束`, 'color:green;background:yellow');
					}
				});
			},
			tabchildChange(index){
				this.detailtab = index
				this.cateId = this.reslist[index].id;
				this.goodsList = [];
				this.currentPage = 0;
				this.lastPage = 0;
				this.loadStatus = 'loadmore';
				this.getGoodsList();
			},
			todetail(){
				
			}
		}
	};
</script>

<style lang="scss" scoped>
	.seckill-card {
		// background: linear-gradient(#faf5e9 20%, #fff 30%, #fff 100%);
	}

	.seckill-title {
		background: url($IMG_URL+'/imgs/tag/seckill_title_bg.png') no-repeat;
		background-position: center top;
		background-size: 100% auto;
	}

	.activity-wrap {

		min-height: 300rpx;

		.title-box {
			.title-text {
				font-size: 32rpx;
				font-weight: bold;
				color: #FFF;
			}

			.more-box {
				.more-text {
					font-size: 22rpx;
					font-weight: 500;
					color: #333333;
				}

				.more-icon {
					font-size: 24rpx;
					color: #333333;
				}
			}
		}

		.scroll-box,
		.goods-box {
			height: 380rpx;
			width: 100%;
		}
	}

	// 小商品卡片
	.min-goods {
		width: 220rpx;
		height: 380rpx;
		background: #fff7f7;
		box-shadow: 0px 7rpx 7rpx 0px rgba(255, 80, 94, 0.32);
		border-radius: 10rpx;

		.img-box {
			width: 220rpx;
			height: 220rpx;
			overflow: hidden;
			position: relative;
			border-radius: 10rpx 10rpx 0 0;

			.img {
				width: 220rpx;
				height: 220rpx;
				background-color: #ccc;
			}
		}

		.mgoods-card-bottom {
			height: 160rpx;
			background: url($IMG_URL+'/imgs/tag/seckill_goods_bg.png') no-repeat;
			background-position: bottom center;
			background-size: 100% 100%;
		}

		.goods-title {
			font-size: 26rpx;
			font-weight: 500;
			color: #000000;
			line-height: 26rpx;
		}

		.price-box {
			.price {
				font-size: 30rpx;
				font-weight: 500;
				color: #ff0000;

				&::before {
					font-size: 24rpx;
				}
			}

			.original-price {
				font-size: 20rpx;
				font-weight: 500;
				text-decoration: line-through;
				color: #c4c4c4;
			}
		}
	}

	// 大商品卡片
	.big-goods {
		width: 710rpx;
		min-height: 260rpx;
		background: #ffffff;
		box-shadow: 0px 7rpx 8rpx 1rpx rgba(254, 76, 29, 0.05);
		border-radius: 20rpx;
		position: relative;
		.shop-box{
			position: absolute;
			bottom: 20rpx;
			right: 20rpx;
			width: 350rpx;
		}
		.goods-img {
			width: 300rpx;
			height: 300rpx;
			border-radius: 6rpx;
		}

		.card-right {
			width: 330rpx !important;
			height: 100%;
		}

		.goods-title {
			font-size: 30rpx;
			// font-weight: 600;
			height: 80rpx;
			width: 350rpx;
			color: #000000;
			      display: -webkit-box;
			      overflow: hidden;
			      -webkit-box-orient: vertical;
			      -webkit-line-clamp: 2;
			
			
		}

		.subtitle-text {
			font-size: 22rpx;
			width: 350rpx;
			font-weight: 500;
			color: #666666;
		}

		.buy-btn {
			width: 140rpx;
			line-height: 60rpx;
			background: #fa4d44;
			border-radius: 15rpx;
			font-size: 26rpx;
			font-weight: 500;
			color: #ffffff;
		}

		.progress-text {
			color: #333;
			font-size: 20rpx;
			
			padding: 8rpx;
			border-radius: 10rpx;
			;
			 
		}

		// 价格
		.price {
			color: #ff0000;
			font-weight: 600;

			&::before {

				font-size: 20rpx;
			}
		}

		.origin-price {
			color: #c4c4c4;
			font-size: 24rpx;

			&::before {

				font-size: 20rpx;
			}
		}
	}

	.menu-category-box,
	.menu-swiper-box {
		position: relative;
		background: #fff;

		.menu-swiper-item {
			background: #fff;
			height: 100%;
			width: 100%;
		}

		.menu-tab-box {
			.tab-list {
				font-size: 26rpx;
				font-weight: 500;
				color: rgba(51, 51, 51, 1);
				margin: 20rpx 0;

				.tab-img {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 10rpx;

				}

				.tab-text {
					font-size: 26rpx;

				}
			}
		}

		.menu-category-dots {
			display: flex;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;

			.category-dot {
				width: 12rpx;
				height: 12rpx;
				background: #eeeeee;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.category-dot-active {
				width: 12rpx;
				height: 12rpx;
				background: #e9b461;
				border-radius: 50%;
				margin-right: 10rpx;
			}
		}
	}

	.detailtitle-active {
		color: #D44C1C;
	}
	.imagestyle {
		border-radius: 1rpx;
		width: 750rpx;
		height: 330rpx;
		}
</style>